let _Vue
export default class MyVueRouter {
    static install(Vue) {
        //判断是否已经安装
        if (MyVueRouter.install.installed) {
            return
        }
        MyVueRouter.install.installed = true
        //把Vue记录下来
        _Vue = Vue
        //混入


        _Vue.mixin({
            beforeCreate() {
                //挂在上router
                if (this.$options.router) {
                    _Vue.prototype.$router = this.$options.router
                    this.$options.router.init()
                }
            }
        })
    }


    options
    data //响应式数据
    routeMap = {}
    mode //模式 hash history
    constructor(options) {
        this.options = options
        this.routeMap = {}
        this.data = _Vue.observable({
            current: "/"
        })
        this.mode = options.mode || "hash"
    }

    init() {
        this.createRouteMap()
        this.initComponents(_Vue)
        this.initEvent()
    }



    createRouteMap() {
        this.options.routes.forEach(item => {
            this.routeMap[item.path] = item.component
        })
    }

    initComponents(Vue) {
        Vue.component("router-link", {
            props: {
                to: String
            },
            //template:'<a :href="to"><slot></slot></a>'
            render(h) {
                return h("a", {
                    attrs: {
                        href: this.to,
                    },
                    on: {
                        click: this.clickHandler
                    }
                }, [
                    this.$slots.default
                ])
            },
            methods: {
                clickHandler(e) {
                    if (this.$router.mode === "hash") {
                        window.location.hash=this.to
                        //因为侦听了haschange事件，不需要手动改变data.current
                    } else if (this.$router.mode === "history") {
                        history.pushState({}, "", this.to)
                        this.$router.data.current=this.to
                    }
                    e.preventDefault()
                }
            }
        })

        const self = this
        Vue.component("router-view", {
            render(h) {
                const component = self.routeMap[self.data.current]
                return h(component)
            }
        })
    }

    initEvent() {
        if(this.mode==="hash"){
            //刚进去时根据地址栏切换
            this.data.current=window.location.hash.substring(1)
            //侦听浏览器的hash变化
            window.addEventListener("hashchange",()=>{
                console.log("hasChange")
                this.data.current=window.location.hash.substring(1)
            })
        }else if(this.mode==="history"){
            //刚进去时根据地址栏切换
            this.data.current = window.location.pathname
            //侦听浏览器的前进后退按钮
            window.addEventListener("popstate", () => {
                this.data.current = window.location.pathname
            })
        }
        
    }
}